<template>
	<!-- components/nav.wxml -->
	<view :style="'padding-top:' + (cover_state ? bar_Height + 44 : 0) + 'px;background-color: ' + bgColor + ';'">
		<view class="status-bar">
			<view class="goBack" @tap="goBack" :style="'padding-top:' + bar_Height + 'px;'" v-if="!show_bol">
				<image :src="image" mode="aspectFit"></image>
			</view>
			<view :class="'tabar ' + (my_class ? 'tabar2' : '')" :style="'padding-top:' + bar_Height + 'px;background-color: ' + bgColor + ';'">
				<text :style="'color: ' + txtColor + ';'">{{ title }}</text>
			</view> 
		</view>
	</view>
</template>
<script>
	export default {
		name: 'UniSteps',
		props: {
			title: {			// 设置标题
			  type: String,
			  value: ''	
			},
			image:{ //返回图标
			  type: String,
			  value: ''
			},
			txtColor:{
			  type:String,
			  value:''
			},
			cover_state: {	 // 控制页面padding-top
			  type: Boolean,
			  value: false
			},
			show_bol: {			// 控制返回箭头是否显示
			  type: Boolean,
			  value: true
			},
			my_class: {			// 控制样式
			  type: Boolean,
			  value: false
			},
			bgColor:{//背景颜色
			  type:String,
			  value:''
			},
		},
		data() {
			return {
				// #ifndef MP-ALIPAY
				bar_Height: uni.getSystemInfoSync().statusBarHeight,
				// #endif
				// #ifdef MP-ALIPAY
				bar_Height: 0,
				// #endif
			}
		},
		methods: {
			goBack: function () {
				// 返回事件
			  uni.switchTab({
			  	url:"/pages/index/index"
			  })
			 
			}
		}
	}
</script>
<style lang="less">
/* components/nav.wxss */
.status-bar {
    width: 100%;
    z-index: 99999;
    position: fixed;
    top: 0;
}
.goBack {
    position: absolute;
    top: 15rpx;
    font-size: 12pt;
}
.goBack image {
   width: 21rpx;
   height: 35rpx;
    padding: 12rpx 20px 0 20rpx;
}
.tabar {
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
}

.tabar2 {
    background: transparent !important;
}
.tabar2 text {
    color: #18181a !important;
    font-weight: lighter !important;
}
.tabar text {
    height: 44px;
    line-height: 44px;
    padding: 0 30rpx;
    color: #18181a;
    font-size: 36rpx;
    font-weight: bold;
    font-family: PingFang SC;
}
.tabar .active {
    color: #fff;
}
</style>
   